<template>
  <div id="app">
    <resumable
      ref="uploadM"
      :uploadList="uploadList"
      :headers="setHeaders"
      :target="getUploadUrl"
      :chunkSize="chunkSize"
      :simultaneousUploads="simultaneousUploads"
      method="octet"
      :fileType="fileType"
      :data="uploadData"
      @complete="complete"
      @fileAdded="fileAdded"
    ></resumable>
    <el-button
      size="small"
      type="primary"
      v-if="showUploadBtn"
      class="upload-btn"
      @click="uploadBtnClick"
      >点击上传</el-button
    >
    <!-- 取消上传 -->
    <el-button
      size="small"
      type="primary"
      v-if="cancelUploadBtn"
      class="upload-btn"
      @click="uploadCancel"
      >取消上传</el-button
    >
    <!-- 删除上传的文件 -->
    <el-button
      size="small"
      type="primary"
      v-if="uploadDeleteBtn"
      class="upload-btn"
      @click="uploadDelete"
      >x</el-button
    >
  </div>
</template>

<script>
import resumable from "./components/resumable/resumable.vue";

export default {
  name: "App",
  components: {
    resumable,
  },
  created() {
    this.uploadDeleteBtn = false;
    this.$store.state.resumable_list = false;
    this.$store.state.resumable_drop = true;
  },
  data() {
    return {
      //   上传
      uploadList: [], // 文件列表
      chunkSize: 1024, // 文件大小 当前值  * 1024
      simultaneousUploads: 3, // 同时上传数
      fileType: ["jpg", "jpeg", "png"], // 支持文件类型
      getUploadUrl: process.env.VUE_APP_BASE_URL + "/V1/fileCenter/upload", // 后台接口参数
      uploadData: {
        //其他的参数
        timestamp: "",
        signature: "",
      },
      setHeaders: {
        // 头部信息
        "Content-Type": "application/octet-stream",
        "X-Custom-Header": "Client Agent",
        Authorization: "Bearer ",
      },
      showUploadBtn: false,
      // 取消上传
      cancelUploadBtn: false,
      uploadDeleteBtn: false,
    };
  },
  methods: {
    /**添加文件 */
    fileAdded(file, r) {
      //_self.showSelectFileBtn = false;
      this.resumableTool = r;
      this.zipName = file.fileName;
      this.showUploadBtn = true;
      // 取消上传按钮
      this.cancelUploadBtn = true;
    },
    // 上传文件
    uploadBtnClick() {
      this.resumableTool.upload();
    },
    /**文件上传结果反馈 */
    complete(file, message) {
      let upRespon = JSON.parse(message);
      let code = upRespon.code;
      // 文件上传成功
      if (code == 0) {
        console.info(upRespon.data);
        // 隐藏上传按钮
        this.showUploadBtn = false;
        this.cancelUploadBtn = false;
        this.uploadDeleteBtn = true;
      } else {
        // 文件上传错误提示
        this.$message.error(upRespon.msg);
      }
    },
    // 取消上传
    uploadCancel() {
      //    zipname清空   上传文件组件出现
      this.showUploadBtn = false;
      this.cancelUploadBtn = false;
      this.$refs.uploadM.resetUpload();
    },
    uploadDelete() {
      // 可以调用后台接口 --
      this.$refs.uploadM.resetUpload();
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
